


// 轮播图选项卡切换
const li = document.querySelectorAll(".banner .list li");
const div = document.querySelectorAll(".cont div");
const big = document.querySelector(".banner .big")
const list = document.querySelector(".banner .list")


var index = 0;
for (var i = 0; i < li.length; i++) {
    li[i].index = i;
    li[i].onmouseover = function () {
        div[index].style.display = "none";
        div[this.index].style.display = "block";
        index = this.index;
    }
    list.onmouseover = function () {
        div[index].style.display = "block";
    }
    big.onmouseout = function () {
        div[index].style.display = "none";
    }
}

var index2 = 0;
// OPPO专区切换
const qieli = document.querySelectorAll(".qie1 li");
const qiediv = document.querySelectorAll(".oppoboxqie .qiecont");

// 根据默认显示选项卡页面
qieli[index2].className = "active";
qiediv[index2].style.visibility = "visible";
qieli[index2].style.cssText = "font-weight: bold;color:black";

for (var i = 0; i < qieli.length; i++) {
    qieli[i].index2 = i;
    // console.log(qieli[i]);
    qieli[i].onclick = function () {
        qiediv[index2].style.visibility = "hidden";
        qiediv[this.index2].style.visibility = "visible";
        qieli[index2].style.cssText = "font-weight: 400";
        index2 = this.index2;
        qieli[index2].style.cssText = "font-weight: bold;color:black";
    }
}

var index3 = 0;
// OnePlus专区
const qieli2 = document.querySelectorAll(".qie2 li");
const qiediv2 = document.querySelectorAll(".oppoboxqie .onepage2 .qiecont");

// console.log(qieli2 );
// console.log(qiediv2 );
// 根据默认显示选项卡页面
qieli2[index3].className = "active";
qiediv2[index3].style.visibility = "visible";
qieli2[index3].style.cssText = "font-weight: bold;color:black";

for (var i = 0; i < qieli2.length; i++) {
    qieli2[i].index3 = i;
    // console.log(qieli2[i]);
    qieli2[i].onclick = function () {
        qiediv2[index3].style.visibility = "hidden";
        qiediv2[this.index3].style.visibility = "visible";
        qieli2[index3].style.cssText = "font-weight: 400";
        index3 = this.index3;
        qieli2[index3].style.cssText = "font-weight: bold;color:black";
    }
}


var index4 = 0;
// 智能好物
const qieli3 = document.querySelectorAll(".qie3 li");
const qiediv3 = document.querySelectorAll(".oppoboxqie .onepage3 .qiecont");

// console.log(qieli3);
// console.log(qiediv3);
// 根据默认显示选项卡页面
qieli3[index4].className = "active";
qiediv3[index4].style.visibility = "visible";
qieli3[index4].style.cssText = "font-weight: bold;color:black";

for (var i = 0; i < qieli3.length; i++) {
    qieli3[i].index4 = i;
    // console.log(qieli3[i]);
    qieli3[i].onclick = function () {
        qiediv3[index4].style.visibility = "hidden";
        qiediv3[this.index4].style.visibility = "visible";
        qieli3[index4].style.cssText = "font-weight: 400";
        index4 = this.index4;
        qieli3[index4].style.cssText = "font-weight: bold;color:black";
    }
}
// 渲染页面模块




// 返回顶部
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
//  console.log(sliderbar);

// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
//  console.log(main);
var goBack = document.querySelector('.goBack');

var mainTop = main.offsetTop;


// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function () {
    // console.log(11);
    // window.pageYOffset 页面被卷去的头部
    // console.log(window.pageYOffset);
    // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
    if (window.pageYOffset >= bannerTop) {
        sliderbar.style.position = 'fixed';
        sliderbar.style.top = sliderbarTop + 'px';
    } else {
        sliderbar.style.position = 'absolute';
        sliderbar.style.top = '300px';
    }
    // 4. 当我们页面滚动到main盒子，就显示 goback模块
    if (window.pageYOffset >= mainTop) {
        goBack.style.display = 'block';
        sliderbar.style.display = "block";
        sliderbar.style.backgroundColor = "#fff";
        sliderbar.style.boxShadow = "0px 1px 6px #d4d4d4";


    } else {
        goBack.style.display = 'none';
        sliderbar.style.display = 'none';
    }

})

goBack.addEventListener('click', function () {
    // 里面的x和y 不跟单位的 直接写数字即可
    // window.scroll(0, 0);
    // 因为是窗口滚动 所以对象是window
    animate(window, 0);
});

// 动画函数
function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        // obj.style.left = window.pageYOffset + step + 'px';
        window.scroll(0, window.pageYOffset + step);
    }, 15);
}

// 对应楼层

// const box = document.querySelectorAll(".oneplus-box");
// console.log(box);
window.onload = function () {

    var box = document.getElementById('#floorbox');
    var lous = document.querySelectorAll(".oneplus-box");//楼层
    var sideNav = document.getElementById('#floor');
    var btns = document.querySelectorAll(".floor li")//按钮


    //1.把楼层的高度设置成屏幕的高度
    for (var i = 0; i < lous.length; i++) {
        lous[i].style.height = 780 + 'px';
    }
    // console.log(window.innerHeight);
    //2.点击按钮可以跳转到对应楼层
    for (var i = 0; i < btns.length; i++) {
        //绑定索引
        btns[i].index = i;
        btns[i].onclick = function () {
            //console.log(this.index);
            //排他
            for (var j = 0; j < btns.length; j++) {
                // btns[j].className = '';
            }
            // console.log(btns[2]);
            // this.className = 'yellow';
            var ih = lous[this.index].offsetTop;

            // var ih = lous[this.index].offsetTop -200+"px";
            window.scrollTo(0, ih - 100);
            // console.log(window.scrollTo);
            // console.log(ih);
        }
    }
}



